<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"站内消息"}){} %>
</head>
<body>
<div id="app" class="layui-fluid">

  <div class="layui-card px-10 py-10">
     <t-tabs v-model="category" :list="categoryOptions.data" @change="changeTabs"> </t-tabs>
  </div>
  <div class="layui-card">
    <div class="layui-card-body">
      <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" colon>
        <t-form-item label="消息标题">
          <t-input v-model="queryForm.title" placeholder="输入消息标题" clearable></t-input>
        </t-form-item>
        <t-form-item label="消息状态">
          <t-select v-model="queryForm.messageUserStatus" :options="statusOptions" placeholder="选择消息状态"></t-select>
        </t-form-item>
        <t-space align="center" breakLine>
          <t-button theme="primary" @click="queryData">
            <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
            查询
          </t-button>
        </t-space>
      </t-form>
    </div>
  </div>

  <div class="layui-card">
    <div class="layui-card-body">
      <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
        <template #loading>
          <div class="t-table--loading-message">加载数据中，请稍后...</div>
        </template>
      </t-table>
      <div class="pa-25 pb-15">
        <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" show-first-and-last-page-btn show-jumper
                      @change="queryData"></t-pagination>
      </div>
    </div>
  </div>
</div>

<script>
  const PATH_URL = "dev/messageUser/";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ pageNumber: 1, pageSize: 10, messageUserStatus: '0' });
      // 表格相关
      const table = useTable();
      const fetchData = window.reloadData = () => fetchPage(axiosGet, PATH_URL + "page", queryForm, table);
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        })
      }


      // 打开查看窗口
      const onView = (row) => {
        openLayer({
          title: '查看站内消息',
          content: PATH_URL + "detail?messageId=" + row.messageId,
          data: { messageId: row.messageId },
          success: function () {
            if (row.messageStatus === '0') {
              req(axiosPost, PATH_URL + "read", { ids: row.id }, (res) => {
                if (res.code === 200) {
                  row.messageStatus = '1';
                  categoryCount();
                }
              });
            }
          },
        });
      }

      // 删除
      const clickDelete = (row) => handleDelete(axiosDelete, PATH_URL + "delete", { id: row.id }, table, "确定删除站内消息用户关联吗？", fetchData);

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '序号', width: "20px" },
        { colKey: 'title', title: '标题', align: 'center', width: '300px' },
        {
          colKey: 'messageStatus', title: '状态', align: 'center', width: '80px', cell: (h, { row }) => {
            const status = statusOptions.find(item => item.value === row.messageStatus);
            if (status) {
              return h(TDesign.Tag, { variant: 'light-outline', theme: status.theme }, status.label)
            } else {
              return h(TDesign.Tag, { variant: 'light-outline', theme: 'danger' }, '未知状态')
            }
          },
        },
        {
          title: '操作',
          align: 'center', width: '80px',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Link, { theme: 'primary', onClick: () => onView(row) }, '查看'),
              h(TDesign.Link, { theme: 'danger', onClick: () => clickDelete(row) }, '删除'),
            ]);
          },
        },
      ];

      // 消息类型
      const category = Vue.ref(null);
      const categoryOptions = useOptions([{ label: '全部', value: null }]);
      let categoryFixed;
      init(() => {
        dictOptions({ columnField: "label,value", codeLike: "dev_message_category_" }, categoryOptions, false, () => {
          categoryOptions.data.unshift({ label: '全部', value: null });
          categoryFixed = $base.deepClone(Vue.toRaw(categoryOptions.data));
          categoryCount();
        });
        fetchData();
      });

      const categoryCount = () => {
        req(axiosGet, PATH_URL + "categoryCount", { messageStatus: "0" }, (res) => {
          if (res.code === 200) {
            const data = res.data;
            const counts = data.map(item => item.count);
            const sum = counts.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue), 0);
            categoryOptions.data = $base.deepClone(categoryFixed);
            categoryOptions.data.forEach(v => {
              const obj = data.find(item => item.category === v.value);
              if (obj) {
                v.label = v.label + "【" + obj.count + "】"
              } else {
                if (v.value === null) {
                  v.label = v.label + "【" + sum + "】";
                } else {
                  v.label = v.label + "【0】";
                }
              }
            });
          }
        })
      }

      const changeTabs = () => {
        queryForm.category = category.value;
        queryData();
      }

      // 状态选项
      const statusOptions = [{ label: "全部", value: null }, { label: "已读", value: '1', theme: "success" }, { label: "未读", value: '0', theme: "warning" }];


      return {
        queryForm,
        table, columns, queryData,
        categoryOptions, category, changeTabs,
        statusOptions,
      }
    },
  });
</script>


</body>
</html>
